<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="会员名称" prop="memberName">
        <el-input v-model="queryParams.memberName" placeholder="请输入会员名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="queryParams.contact" placeholder="请输入联系方式" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="建议类型" prop="adviceType">
        <el-select v-model="queryParams.adviceType" placeholder="请选择建议类型" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.sys_advice_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="来源" prop="origin">
        <el-input v-model="queryParams.origin" placeholder="请输入来源" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="回复人" prop="updateBy">
        <el-input v-model="queryParams.updateBy" placeholder="请输入回复人" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="门店" prop="deptId">
        <el-select v-model="queryParams.deptId" placeholder="请选择门店" clearable style="width: 240px">
          <el-option v-for="item in deptOptions" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.sys_advice_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="会员名称" prop="memberName" width="120" show-overflow-tooltip />
      <el-table-column label="联系方式" prop="contact" width="120" />
      <el-table-column label="门店名称" prop="deptName" width="120" show-overflow-tooltip />
      <el-table-column label="来源" prop="origin" width="120" />
      <el-table-column label="建议类型" prop="adviceType" width="120" />
      <el-table-column label="意见反馈" prop="adviceMsg" min-width="200" show-overflow-tooltip />
      <el-table-column label="反馈图片" prop="images" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.imgList.length > 0">
            <el-image style="width: 60px; height: 60px" :src="scope.row.imgList[0]" :preview-src-list="scope.row.imgList">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_advice_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示" align="center" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isShow" active-value="1" inactive-value="0"
            @change="handleShowChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="回复人" prop="updateBy" min-width="120" show-overflow-tooltip />
      <el-table-column label="回复时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回复内容" prop="resultContent" min-width="200" show-overflow-tooltip />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="toHandleView(scope.row)">查看</el-button>
          <el-button v-if="scope.row.status == '1'" size="mini" type="text" icon="el-icon-edit"
            @click="toHandleAdvice(scope.row)">回复</el-button>
          <el-button v-if="scope.row.status != '1'" size="mini" type="text" icon="el-icon-edit"
            @click="toHandleAdvice(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 查看详情 -->
    <el-dialog title="查看意见反馈" :visible.sync="openView" width="600px" append-to-body>
      <el-form ref="viewForm" label-width="100px">
        <el-form-item label="会员名称">{{ viewData.memberName }}</el-form-item>
        <el-form-item label="联系方式">{{ viewData.contact }}</el-form-item>
        <el-form-item label="门店名称">{{ viewData.deptName }}</el-form-item>
        <el-form-item label="来源">{{ viewData.origin }}</el-form-item>
        <el-form-item label="建议类型">{{ viewData.adviceType }}</el-form-item>
        <el-form-item label="意见反馈">{{ viewData.adviceMsg }}</el-form-item>
        <el-form-item label="反馈图片">
          <div style="display:inline-block; margin-right: 10px;margin-top: 10px" v-for="url in viewData.imgList"
            :key="url">
            <el-image style="width: 100px;height: 100px" :src="url" :preview-src-list="viewData.imgList" lazy></el-image>
          </div>
        </el-form-item>
        <el-form-item label="提交时间">{{ viewData.createTime }}</el-form-item>
        <el-form-item label="状态">
          <dict-tag :options="dict.type.sys_advice_status" :value="viewData.status" />
        </el-form-item>
        <el-form-item label="回复时间">{{ viewData.updateTime }}</el-form-item>
        <el-form-item label="回复人">{{ viewData.updateBy }}</el-form-item>
        <el-form-item label="回复内容">
          <div class="contentBox" v-html="viewData.resultContent"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 处理意见反馈 -->
    <el-dialog title="处理意见反馈" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="意见反馈">
          {{ adviceMsg }}
        </el-form-item>
        <el-form-item label="反馈图片">
          <div style="display:inline-block; margin-right: 10px;margin-top: 10px" v-for="url in adviceImgs" :key="url">
            <el-image style="width: 100px;height: 100px" :src="url" :preview-src-list="adviceImgs" lazy></el-image>
          </div>
        </el-form-item>

        <el-form-item label="建议类型" prop="adviceType">
          <el-select v-model="form.adviceType" placeholder="请选择建议类型" clearable style="width: 100%"
            @change="changeAdviceType">
            <el-option v-for="dict in dict.type.sys_advice_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="回复内容" prop="resultContent">
          <!-- <el-input v-model="form.resultContent" maxlength="1000" :autosize="{ minRows: 15 }" type="textarea"
            placeholder="请输入回复内容"></el-input> -->
          <Editor :value="form.resultContent" @input="$event => { form.resultContent = $event }" :minHeight="500"
            ref="ue" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { adviceList, adviceDetail, handleAdvice, storeList, handleShowData } from "@/api/adviceFeedback/adviceFeedback";
// import Ueditor from "@/components/UE/ueditor";

export default {
  name: "Feedback",
  dicts: ['sys_advice_type', 'sys_advice_status'],
  // components: {
  //   Ueditor,
  // },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 角色表格数据
      dataList: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 门店列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        memberName: undefined,
        contact: undefined,
        adviceType: undefined,
        origin: undefined,
        updateBy: undefined,
        deptId: undefined,
        startDate: undefined,
        endDate: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      adviceMsg: '',
      adviceImgs: [],
      // 表单校验
      rules: {
        adviceType: [
          { required: true, message: "请选择建议类型", trigger: "change" }
        ],
        resultContent: [
          { required: true, message: "回复内容不能为空", trigger: "blur" }
        ],
      },
      openView: false,
      viewData: {},
    };
  },
  created () {
    this.getList();

    storeList().then(response => {
      this.deptOptions = response.data;
    });
  },
  methods: {
    changeAdviceType (e) {
      this.dict.type.sys_advice_type.forEach(item => {
        if (item.value == e) {
          if (item.raw.remark) {
            this.form.resultContent = `<p>${item.raw.remark}</p>`;
          }
        }
      });
    },
    handleShowChange (row) {
      let text = row.isShow === "0" ? "不显示" : "显示";
      this.$modal.confirm('确认要' + text + '"' + row.memberName + '"的数据吗？').then(function () {
        return handleShowData({
          id: row.id,
          isShow: row.isShow,
        });
      }).then(() => {
        this.$modal.msgSuccess("操作成功");
      }).catch(function () {
        row.isShow = row.isShow === "0" ? "1" : "0";
      });
    },
    /** 查询列表 */
    getList () {
      this.loading = true;

      if (this.dateRange.length > 0) {
        this.queryParams.startDate = this.dateRange[0];
        this.queryParams.endDate = this.dateRange[1];
      }

      adviceList(this.queryParams).then(response => {
        let { rows } = response;

        rows.forEach(item => {
          if (item.images) {
            item.imgList = item.images.split(";");
          } else {
            item.imgList = [];
          }
        });

        this.dataList = rows;
        this.total = response.total;
        this.loading = false;
      }
      );
    },
    toHandleView (row) {
      this.viewData = {}
      this.openView = true;
      adviceDetail(row.id).then(response => {
        let { data } = response;
        if (data.images) {
          data.imgList = data.images.split(";");
        } else {
          data.imgList = [];
        }
        this.viewData = data;
      });
    },
    toHandleAdvice (row) {
      this.reset();
      this.form.id = row.id;
      this.form.adviceType = row.adviceType;
      this.form.resultContent = row.resultContent || ''
      this.adviceMsg = row.adviceMsg;
      this.adviceImgs = row.imgList;
      this.open = true;
    },
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.resultContent = this.form.resultContent.replace(/<p><br><\/p>/g, "");
          handleAdvice(this.form).then(() => {
            this.open = false;
            this.reset();
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        adviceType: undefined,
        resultContent: undefined,
      };
      this.adviceMsg = '';
      this.adviceImgs = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>

<style scoped="scoped">
.contentBox /deep/ img {
  width: 100%;
  height: auto;
}

.ueditor {
  position: relative;
}

.ueditor ::v-deep.edui-editor-toolbarbox {
  position: absolute !important;
}

.ueditor ::v-deep.edui-editor-iframeholder {
  margin-top: 78px;
}

.ueditor ::v-deep.edui-editor>div:first-child {
  position: absolute !important;
}

.ueditor ::v-deep#edui1 div#edui1_toolbarbox {
  height: 100% !important;
}
</style>